<template>
  <template v-if="user">
    <van-cell title="当前用户">
      <img class="user-image" style="height: 40px" :src="user.userAvatar" type="circle"/>
      <div>用户名:{{user.username}}</div>

    </van-cell>
    <van-cell title="修改信息" is-link to="/user/update"></van-cell>
    <van-cell title="我创建的队伍" is-link to="/team/creatTeam"></van-cell>
    <van-cell title="我加入的队伍" is-link to="/team/joinTeam"></van-cell>
  </template>
  <van-empty v-if="!user" description="暂未登录" />
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../services/user.ts";
const router = useRouter();
const user=ref({})

onMounted(async ()=>{
  //获取登录用户信息 一定要加上await 不然获取的是一个axios封装的对象
  user.value=await getCurrentUser()
})


</script>

<style scoped>
.user-image{
  width: 40px; /* 宽高需相等 */
  height: 50px;
  border-radius: 50%; /* 关键：50% 会将方形切成圆形 */
  object-fit: cover; /* 可选：图片比例不符时，居中裁剪填充 */
}

</style>